<script setup>
import { ref, onMounted } from 'vue'
import { getAllBankAPI } from '@/apis/bank'

const bankList = ref([])

const imgPrefix = 'http://82.157.143.242:9000/rongxiaotong/bank/bank'
const banks = [
    '1001', '1002', '1003', '1004',
    '1005', '1006', '1007', '1008',
    '1009', '1010'
]

onMounted(async () => {
    const res = await getAllBankAPI()
    if (res.code === 2000) {
        bankList.value = res.data
    }
})
</script>

<template>
<div class="finance-page">
    <div class="bank-list">
        <div class="bank-container" v-for="(bank, i) in bankList" :key="i">
            <RouterLink :to="`/financeDetail/${bank.id}?suffix=${banks[i]}`"><img :src="`${imgPrefix}${banks[i]}.jpg`" alt=""></RouterLink>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
.finance-page {
    width: 1280px;
    min-height: 600px;
    padding: 20px 40px;
    margin: 20px auto;
    background-color: #fff;
}

.bank-list {
    display: flex;
    flex-wrap: wrap;
}

.bank-container {
    display: flex;
    justify-content: center;
    $bankSize: 140px;
    width: $bankSize + 10px;
    height: $bankSize + 10px;
    padding: 10px;
    margin: 20px 20px;
    cursor: pointer;
    box-shadow:  5px 5px 10px #d9d9d9,
             -5px -5px 10px #ffffff;

    img {
        width: $bankSize;
        height: $bankSize;
    }
}
</style>
